<template>
  <div class="cms-views-container cms-login-page">
    <div class="login-header-contain h-[88px]">
      <header class="flex items-center justify-end h-10 px-4">
        <img :src="headerIcons.login_close" alt="" class="w-[26px] h-[26px]" />
      </header>

      <h2 class="px-8 my-0 text-xl font-medium text-black">欢迎登录</h2>
    </div>

    <form class="px-8 pt-6">
      <div class="login-input" :class="type === 1 ? 'login-type-input' : ''">
        <span> <label class="pr-6">账号</label> <label v-if="type !== 1">abcd1234</label> </span>
        <img :src="headerIcons.password_close" alt="" v-if="type !== 1" class="w-6 h-6" />
      </div>

      <div class="login-input" :class="type === 1 ? 'login-type-input' : ''">
        <span>
          <label class="pr-6">密码</label>
          <label v-if="type !== 1">
            <span v-if="type !== 3">
              <i v-for="item in 8" class="inline-block w-1 h-1 bg-black mx-[2px] login-password-dot" :key="item"></i>
            </span>
            <label v-else>12345678</label>
          </label>
        </span>
        <span v-if="type !== 1">
          <img :src="headerIcons.password_close" alt="" class="w-6 h-6" />
          <img :src="headerIcons.eye_close" alt="" v-if="type !== 3" class="w-6 h-6 ml-4" />
          <img :src="headerIcons.eye" alt="" v-else class="w-6 h-6 ml-4" />
        </span>
      </div>
    </form>

    <div class="px-8 mt-[18px] relative">
      <img :src="headerIcons.checkbox" alt="" v-if="type !== 5" class="w-[18px] h-[18px] mr-[3px]" />
      <img :src="headerIcons.selected" alt="" v-else class="w-[18px] h-[18px] mr-[3px]" />
      <span class="text-xs text-[#8f9299]"
        >已阅读并同意<a class="login-primary">用户协议</a>和<a class="login-primary">隐私协议</a></span
      >
      <button
        class="block mt-6 h-[42px] w-full text-white border-0 bg-gradient-to-r from-[#ff983f] to-[#ff613f] rounded-lg"
        :class="type === 1 ? 'opacity-30' : ''"
      >
        登录
      </button>
      <p class="flex items-center justify-between mt-4 mb-0 login-footer">
        <a href="javascript:;">忘记密码?</a>
        <a href="javascript:;">一键注册</a>
      </p>
      <span
        class="inline-block absolute bottom-8 w-[144px] h-9 login-pravite-text rounded-lg text-white text-sm text-center leading-9"
        v-if="type === 4"
        >请阅读并同意协议</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import headerIcons from '../assets/login'

withDefaults(defineProps<{ type: number }>(), { type: 1 })
</script>

<style scoped lang="less">
@import '../styles/vars.less';
.cms-login-page {
  .login-header-contain {
    background: url('../assets/login/diffuse_back.png') no-repeat;
  }
  .login-input {
    height: 53px;
    border-bottom: 1px solid #f1f3f7;
    @apply flex items-center justify-between;
    label {
      @apply text-sm text-[#484a4d];
    }
  }
  .login-type-input {
    label {
      @apply text-[#B4B8BF];
    }
  }
  .login-checked {
    border: 1px solid #c4c4c5;
    border-radius: 50%;
  }
  // TODO: 后期改成css 变量

  .login-primary {
    color: #ff613f;
    // color: @cms-views-primary-color;
  }

  .login-footer {
    a {
      color: #484a4d;
    }
  }
  .login-password-dot {
    border-radius: 50%;
  }
  .login-pravite-text {
    background-color: rgba(0, 0, 0, 0.65);
    left: 50%;
    transform: translateX(-50%);
  }
  .login-type-checked {
    border-radius: 50%;
    @apply flex items-center;
  }
}
</style>
